<template>
  <div class="number-main">
    <div
      v-if="showReduce"
      class="reduceNum"
      :bordered="false"
      :disabled="removeClass"
      @click="reduceNum"
    >
      <n-icon :component="Remove" :size="props.iconSize" />
    </div>
    <!-- {{ props.precision }} -->
    <DFModalKeyboard
      v-model:value="valueNum"
      keyboard-class="login-username"
      :placeholder="t('common.form.plInput')"
      :input-props="{ autocomplete: 'new-password' }"
      :maxlength="50"
      input-type="number"
      :on-update-value="inputChange"
      style="flex: 1"
      :min="props.min"
      :max="props.max"
      :precision="props.precision"
      :focus="props.focus"
      @blur="inputBlur"
    />
    <!-- <template #prefix>
      @ok-fn="onUpdateValue"
        <DFSvgIcon class="login-svg" :name="'user'" />
      </template> -->
    <!-- </DFModalKeyboard> -->

    <!-- <n-input-number
    v-if="!virtualKeyboard"
      :placeholder="t('common.form.plInput')"
      :min="props.min"
      :max="props.max"
      style="flex: 1"
      :show-button="false"
      v-bind="$attrs"
      :onUpdateValue="onUpdateValue"
    /> -->
    <div v-if="showAdd" class="addNum" :bordered="false" :disabled="addClass" @click="addNum">
      <n-icon :component="Add" :size="props.iconSize" />
    </div>
  </div>
</template>

<script lang="ts" setup name="InputNumber">
  import { Add, Remove } from '@vicons/ionicons5';
  import { useUserStore } from '@/store/modules/user';
  import DFModalKeyboard from '@/components/DFModalKeyboard/index.vue';
  import { useMixins } from '@/hooks/useMixins';

  const { message, t } = useMixins();

  const props = withDefaults(defineProps<Props>(), {
    min: undefined,
    max: undefined,
    defaultValue: 0,
    iconSize: 25,
    timer: null,
    showReduce: true,
    showAdd: true,
    radius: 4,
    precision: 0,
    focus: null,
    blur: null,
  });

  const emit = defineEmits(['timeChange', 'addNum', 'reduceNum']);

  const userStore = useUserStore();

  const virtualKeyboard = computed(() => userStore.virtualKeyboard);

  interface Props {
    min?: number;
    max?: number;
    onUpdateValue?: Fn;
    needBlur?: Fn;
    defaultValue?: any;
    iconSize?: number | string;
    timer?: number | null;
    showReduce?: boolean;
    showAdd?: boolean;
    radius?: number;
    precision?: number;
    focus?: Fn;
    blur?: Fn;
  }
  const radius = computed(() => {
    return `${props.radius}px`;
  });
  const valueNum: any = ref<any>(0);

  // console.log(props)

  // if (props?.defaultValue) {
  //   console.log(props.defaultValue)
  //   console.log(valueNum.value)
  //   valueNum.value = virtualKeyboard?props.defaultValue+'':props.defaultValue;
  // }

  watch(
    props,
    () => {
      const { precision = 2 } = props;

      let value = virtualKeyboard.value
        ? `${props.defaultValue}`
        : props.defaultValue === 0
        ? 0
        : props.defaultValue || null;

      if (value)
        value = Number(value)
          .toFixed(precision || 0)
          .toString();

      valueNum.value = value;
    },
    { deep: true, immediate: true }
  );
  function inputChange(val) {
    // e?.target?.value||0
    console.log(val);
    return onUpdateValue(val || 0);
  }
  function inputBlur() {
    // if(Number(props.defaultValue)!==Number(valueNum.value)){

    // }

    props.needBlur && props.needBlur(valueNum.value);

    props.blur && props.blur();
  }
  let timerout;
  function setTimeoutFn() {
    if (props.timer) {
      clearTimeout(timerout);
      timerout = setTimeout(() => {
        emit('timeChange', valueNum.value);
      }, props.timer);
    }
  }
  const removeClass = computed(() => {
    return Number(valueNum.value) <= props.min;
  });
  const addClass = computed(() => {
    if (isNaN(valueNum.value) || isNaN(props.max)) {
      return true;
    }

    return Number(valueNum.value) >= Number(props.max);
  });
  function onUpdateValue(e?: any) {
    setTimeoutFn();

    console.log(e);

    if (props.onUpdateValue) {
      const isChange = props.onUpdateValue({ value: Number(e) });

      console.log(isChange);

      if (isChange === false) return false;
    }

    if (![null, undefined].includes(e)) valueNum.value = e;

    // props.onUpdateValue && props.onUpdateValue(valueNum);

    if (props.needBlur && virtualKeyboard.value) props.needBlur(valueNum.value);

    return valueNum.value;
  }

  // const onUpdateValue2 = (val?: any) => {
  //   console.log(2)
  //   // if (e) valueNum.value = e;

  //   // console.log(valueNum.value)

  //   valueNum.value = val || 0

  //   props.onUpdateValue && props.onUpdateValue(valueNum.value);

  //   if(props.needBlur&&virtualKeyboard.value){
  //     props.needBlur(valueNum.value);
  //   }
  // };

  function reduceNum() {
    if (Number(valueNum.value) <= props.min) {
      message.destroyAll();

      message.error(t('productionCenter.tips.minThan') + props.min);

      return;
    }

    if (props.onUpdateValue) {
      const isChange = props.onUpdateValue({ value: Number(valueNum.value) - 1 });

      if (isChange === false) return;
    }

    setTimeoutFn();

    valueNum.value = Number(valueNum.value) - 1;

    emit('reduceNum', valueNum.value);
  }
  function addNum() {
    if (Number(valueNum.value) >= props.max) return;

    if (props.onUpdateValue) {
      const isChange = props.onUpdateValue({ value: Number(valueNum.value) + 1 });

      console.log(isChange);

      if (isChange === false) return;
    }

    setTimeoutFn();

    valueNum.value = Number(valueNum.value) + 1;

    emit('addNum', valueNum.value);
  }
</script>

<style lang="less" scoped>
  .number-main {
    display: flex;
    align-items: center;
    flex: 1;
  }
  :deep(.n-button .n-base-wave.n-base-wave--active) {
    z-index: 1;
    animation-name: none !important;
  }
  :deep(.n-button) {
    padding: 0 !important;
    min-width: 0 !important;
  }

  :deep(.n-input-wrapper) {
    font-size: 20px;
    padding-left: 8px !important;
  }

  :deep(.n-input__input-el) {
    text-align: center !important;
  }

  // .n-base-wave--active{
  //     background-color: red;
  // }
  .reduceNum {
    width: 36px !important;
    height: 48px !important;
    background: #d4d6d9;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border-bottom-left-radius: 4px !important;
    border-top-left-radius: 4px !important;
    border-bottom-right-radius: 0 !important;
    border-top-right-radius: 0 !important;
    &:hover {
      :deep(svg) {
        color: #ff4949;
      }
    }
    &:active {
      :deep(svg) {
        color: #ff4949;
      }
    }
  }
  .addNum {
    width: 36px !important;
    height: 48px !important;
    background: #d4d6d9;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border-bottom-left-radius: 0 !important;
    border-top-left-radius: 0 !important;
    border-bottom-right-radius: 4px !important;
    border-top-right-radius: 4px !important;
    &:hover {
      :deep(svg) {
        color: #409eff;
      }
    }
    &:active {
      :deep(svg) {
        color: #409eff;
      }
    }
  }
  :deep(.n-input) {
    border-radius: v-bind(radius) !important;
  }
  :deep(.n-input .n-input__placeholder span) {
    text-align: center;
  }
</style>
